<!--  -->
<template>
  <div class="sale-container">
    <chart-title title="产品营销统计" />
    <div
      class="chart-container"
      style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
    >
      <div class="filter-container">
        <el-select
          v-model="time"
          size="mini"
          style="width:100px;"
        >
          <el-option
            v-for="(item,index) in timeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        class="chart-container"
        style="height:100%;display:flex;align-items:center;"
      >
        <div
          id="proLineSaleChart"
          style="width:50%;height:100%;min-height:200px;display:flex;align-items:center;"
        />
        <div
          id="proSaleChart"
          style="width:50%;height:100%;min-height:200px;display:flex;align-items:center;"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import ChartTitle from './chartTitle.vue'
import {gradientColor} from '@/utils/commonFun.js'

export default {
  components: {
    ChartTitle,
  },
  setup(props, context) {
    var selectData = reactive({
      selectItem: null,
    })
    var reactiveData = reactive({
      time: 1,
      timeOption: [
        { label: '近7天', value: 1 },
        { label: '近30天', value: 2 },
        { label: '近6个月', value: 3 },
      ],
      proLineOption: {
        legend: {
          orient: 'vertical',
          bottom: 20,
          show: false,
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          showContent: true,
          formatter: function(e, t, n) {
            const data = e.data
            selectData.selectItem = { ...e.data, color: e.color }
            console.log(data, e, t, n, selectData.selectItem)

            const context = `
               <div>
                   <p class="tooltip_style"><span class="tooltip_left">总营销额：</span><span class="tooltip_right">${data.value}</span></p>
               </div>
            `
            return context
          },
        },
        color: [
          '#417ff9',
          '#ff9623',
          '#53c89c',
          '#fe9ec6',
          '#7666f9',
          '#7666f9',
          '#f9d25d',
        ],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '80%',
            selectedMode: 'single',
            label: {
              position: 'inner',
              fontSize: 12,
              rotate: true,
              fontStyle: 'normal',
              fontWeight: 'normal',
            },
            data: [
              { value: 1048, name: '感冒', selected: true },
              { value: 735, name: '心脑血管' },
              { value: 580, name: '免疫系统' },
              { value: 484, name: '骨科' },
              { value: 300, name: '儿科' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      proOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%',
        },
        color: ['#0d77a1', '#1f8cb7', '#2f98c1', '#48acd3', '#73c0de'],
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 50,
            bottom: 40,
            width: '30%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'outsideFill',
              color: '#333',
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 100, name: '三清片' },
              { value: 90, name: '999感冒灵' },
              { value: 70, name: '小二咳喘口服液' },
              { value: 60, name: '感冒颗粒' },
              { value: 50, name: '健胃消食片' },
              { value: 30, name: '护肝片' },
              { value: 20, name: '小柴胡颗粒' },
            ],
          },
        ],
      },
    })
    const proLineChartInit = () => {
      var chartDom = document.getElementById('proLineSaleChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      // 绘制图表
      myChart.setOption(reactiveData.proLineOption)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    const proChartInit = () => {
      var chartDom = document.getElementById('proSaleChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      console.log(gradientColor('#417ff9', '#ff0000', 10))
      reactiveData.proOption.color = gradientColor('#417ff9', '#ff0000', 10)
      // 绘制图表
      myChart.setOption(reactiveData.proOption)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    onMounted(() => {
      proLineChartInit()
      proChartInit()
    })
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>
<style lang="scss" scoped>
.sale-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 6666;
    }
  }
}
</style>
